<template>
  <div class="preview-image">
    <el-dialog  :visible.sync="editConfig.visible" :width="dialogWidth" :before-close="handleClose">
      <div class="content" style="position: relative;">
        <div class="dia_title">
          <p>{{editConfig.title}}</p>
          <div class="close-box">
            <el-image :src="closeUrl" class="img-right" @click.native="handleClose"></el-image>
          </div>
        </div>
        <div class="dia_con">
          <div class="searchInput">
            <el-input :placeholder="searchHolder" v-model="searchInput" class="input-with-select">
              <el-select @change="searchSelChange" v-model="searchSelect" slot="append" placeholder="搜索设备">
                <el-option label="搜索设备" value="设备"></el-option>
                <el-option label="搜索集群" value="集群"></el-option>
              </el-select>
            </el-input>
          </div>
        </div>
        <div class="dia_table">
          <TableCommonView 
            :table-list="tableList"
            @selCommonClick="selCommonClick"
            @selTableCol="selTableCol"
          >
            <template slot="tableButton">
              <el-table-column label="操作" width="100" fixed="right">
                <template slot-scope="scope">
                  <el-button type="text" size="small" @click="btnEdit(scope.row)"
                    style="margin-right: 5px">详情
                  </el-button>
                  <el-button type="text" size="small" @click="AddEdit(scope.row)"
                    style="margin-right: 5px">详情
                  </el-button>
                </template>
              </el-table-column>
            </template>
          </TableCommonView>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  statisticsList,
} from "@/api/deviceManage/deviceManage"
export default {
  name: "AddSalesDetailsDialog",
  mixins: [],
  props: {
    editFormDialog: {
      type: Object,
      default: () => {
        return {
          title:"添加设备",
          visible: false,
          infomation: {
          },
        }
      }
    }
  },
  computed: {},
  data() {
    return {
      editConfig:this.editFormDialog,
      dialogWidth: "39%",
      closeUrl: require("@/assets/img/close.png"),
      searchInput:"",
      searchSelect:"",
      searchHolder:"请输入设备名称",
      tableList: {}, 
      tableColumn: [
        { label: "设备名称", prop: "name", min: 150,},
        { label: "设备ID", prop: "area", },
        { label: "设备IP", prop: "ipAddr",  },
        { label: "所属集群", prop: "areas", },
        { label: "状态", prop: "status", },
      ],
      showCol: ["设备名称", "设备ID","设备IP","所属集群","状态",],
    }
  },
  created() {
    this.setTable()
  },
  mounted(){
  },
  watch: {
  },
  methods: {
    // 详情
    selCommonClick(row) {
      console.log(row, "详情")
    },
    handleClose() {
      this.pedestalList=[]
      this.editConfig.visible = false
    },
    setTable() {
      this.tableList = {
        tableInfomation: [],
        // selectIndex: true,
        showcol: this.showCol,
        allcol: [],
        // selectBox: true,
        tableColumn: this.setColumnVisible(this.showCol)
      }
      this.tableList.allcol = this.tableList.tableColumn.filter((ele) => !ele.default).map((ele) => ele.label)
    },
    selTableCol(val) {
      this.showcol = val
      this.tableList.tableColumn = this.setColumnVisible(val)
    },
    setColumnVisible(showCol) {
      return this.tableColumn.map((ele) => {
        return {
          ...ele,
          isShowColumn: showCol.includes(ele.label)
        }
      })
    },
    searchSelChange(val){
      this.searchInput=""
      this.searchHolder=`请输入${val}名称`
    },
    btnEdit(row){
      console.log(row,"详情row")
    },
    AddEdit(row){
      console.log(row,"row")
    },
    getStatisticsList(){
      statisticsList()
    }
    
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.preview-image {
  width: 760px;
  height: 734px;
  color:#fff;
  .dialog-header {
    display: flex;
    align-items: center;
    font-size: 14px;
    color: #fff;
    height: 65px;
    background: #0a1a34;
  }
  .content {
    width: 760px;
    height: 734px;
    background-image: url("/public/panoramicData/pic_alert_bg.png");
    background-position-x: center;
    background-repeat: no-repeat;
    background-size: contain;
    box-sizing: border-box;
    padding: 0 20px;
    position: relative;
    .dia_title{
      color:#fff;
      padding:10px 10px;
      font-size:28px;
      border-bottom:1px solid #fff;
      display:flex;
      justify-content: space-between;
      align-items: center;
      p{
        margin:0;
      }
      .el-image{
        display:block;
      }
      .close-box{
        margin-top:10px;
        .el-image{
          width:17px;
          height:17px;
          cursor:pointer;
        }
      }
    }
  }
}
</style>
<style lang="scss">
.el-dialog{
  background: unset;
}
.el-dialog__header {
  padding: 0 20px;
  background: #0a1a34;
  border-bottom: 0px solid #e5e5e5;
}
.el-dialog__headerbtn {
  display: none;
}
.el-dialog__body {
  background: #0a1a34;
  width: 760px;
}
.dia_con{
  display:flex;
  margin:30px 0px;
  justify-content: space-between;
  .searchInput{
    width:100%;
    .el-input{
      background: #0A1A34 !important;
    }
    .el-select{
      border: 1px solid rgba(255, 255, 255, 0.5);
    }
    input{
      background: #0A1A34 !important;
    }
    .el-input-group__append{
      // background: #0A1A34 !important;
      // border: 1px solid rgba(255, 255, 255, 0.5);
      width:100px;
      .el-input__inner {
        // background: #0A1A34 !important;
      }
    }
  }
}
.dia_table{
  margin-top:30px;
}

::v-deep {
  .searchInput{
    background: #0A1A34 !important;
    .el-input-group--appen{
      background: #0A1A34 !important;
      .el-input__inner {
        border: 1px solid rgba(255, 255, 255, 0.5);
        background: #0A1A34 !important;
      }
    }
  }
}
</style>
